<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="div1">
    <p id="p1"  my="12345"  class="a b c">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
</div>
<script>

    /*getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	    创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。*/

    var para=document.createElement("p");                  //创建元素节点
    var node=document.createTextNode("这是一个新段落。");     //创建文本节点
    para.appendChild(node);                              //元素节点追加 文本子节点
    var element=document.getElementById("div1");
    element.appendChild(para);                        // div节点 中  追加 p元素子节点


    console.log(document.getElementById('p1').getAttribute('my'));
    console.log(document.getElementById('p1').getAttribute('class'));
    document.getElementById('p1').setAttribute('class','d')


</script>

</body>
</html>